<template>
  <div class="app-container calendar-list-container">
    
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待初审" name="first">
        <div class="filter-container">
          <el-button class="filter-item" type="primary" v-waves icon="el-icon-circle-plus-outline">领取</el-button>
          <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%" max-height="540">
            <el-table-column type="selection" align="center" label="选择" width="65">
            </el-table-column>
            <el-table-column width="220px" align="center" label="订单编号">
              <template slot-scope="scope">
                <span>{{scope.row.order_num}}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="180px" align="center" label="计划名称">
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column width="150px" align="center" label="上次审核人">
              <template slot-scope="scope">
                <span>{{scope.row.lastcheckperson}}</span>
              </template>
            </el-table-column>
            <el-table-column width="150px" align="center" label="缴费方法">
              <template slot-scope="scope">
                <span v-if="scope.row.price">{{scope.row.pay_type_text}}</span>
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="优惠政策" width="150">
              <template slot-scope="scope">
                <span v-if="scope.row.price">{{scope.row.favor_type_text}}</span>
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column class-name="status-col" label="订单总额" width="150">
              <template slot-scope="scope">
                <el-tag :type="scope.row.price">{{scope.row.price}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="进审时间" width="220" class-name="small-padding">
              <template slot-scope="scope">
                <span>{{scope.row.start_check_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="待复审" name="second">
        <div class="filter-container">
          <el-button class="filter-item" type="primary" v-waves icon="el-icon-circle-plus-outline">领取</el-button>
          <component :is="allList" :list="list" :listLoading="listLoading"></component>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
        :page-sizes="[5,10,20,30, 50]" :page-size="listQuery['per-page']" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { firstList } from '@/api/order'
import waves from '@/directive/waves' // 水波纹指令
import { parseTime } from '@/utils'
import alllist from './components/alllist'

export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    return {
      allList: alllist,
      activeName: 'first',
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        'per-page': 10,
        importance: undefined,
        title: undefined,
        type: undefined
      },
      importanceOptions: [1, 2, 3],
      temp: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published'
      },
      pvData: [],
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      downloadLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      // 判断是待初审还是待复审
      if (this.activeName === 'first') {
        firstList(this.listQuery).then(response => {
          this.list = response.data.data
          this.total = response.data._meta.totalCount
          this.listLoading = false
        })
      } else {
        firstList(this.listQuery).then(response => {
          this.list = response.data.data
          this.total = response.data._meta.totalCount
          this.listLoading = false
        })
      }
    },
    handleClick() {
      this.resetTemp()
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery['per-page'] = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      row.status = status
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        status: 'published',
        type: ''
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>
